<template>
  <div
    :class="[
      'learun-header-logo',
      { 'side-logo': ['side3'].includes(lr_theme.nav) },
      {
        'side-collapse-logo': ['side3'].includes(lr_theme.nav) && lr_isCollapse,
      },
    ]"
    :style="{
      height: ['side3'].includes(lr_theme.nav)
        ? `${lr_theme.headerHeight}px`
        : '',
    }"
  >
    <img class="img" :src="logoimg" />
    <p v-if="!['side3'].includes(lr_theme.nav)" class="text">
      {{ appConfig.title }}
    </p>
  </div>
</template>
<script>
export default {
  name: "header-logo",
  data() {
    return {};
  },
  computed: {
    logoimg() {
      return `${this.rootUrl}${this.lr_theme.logo}`;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.learun-header-logo {
  display: flex;
  height: 100%;
  align-items: center;
  padding-left: 20px;

  .img {
    height: 24px;
  }
  .text {
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    margin-top: 1px;
    margin-left: 8px;
  }

  &.side-logo {
    width: 100%;
    justify-content: center;
  }

  &.side-collapse-logo {
    .img {
      height: auto;
      width: 56px;
    }
  }
}
</style>
